<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view class="bgc" slot="top">
				<navbar></navbar>
				<view class="tab">
					<u-tabs :keyName="language=='zh'?'zh':'en'" :activeStyle="activeStyle" inactiveStyle="color:#141414"
						:list="tabList" :itemStyle="itemStyle" lineWidth="21" lineHeight="23"
						:lineColor="`url(${lineBg}) 100% 100%`" :scrollable="false" @click="tabClick"
						:current="current"></u-tabs>
				</view>
			</view>
			<view class="content">
				<view class="item radius" v-for="(item,index) in dataList" :key="index">
					<view>
						<u--text :text="language=='zh'?item.shopname:item.shopname_copy" bold color="#333" size="20" lineHeight="28" lines="2" margin="0 0 10px 0"></u--text>
						<u--text :text="$t('order.reserveTime')+timetrans(item.reserve_time*1000)" color="#989898" size="14" lines="2"></u--text>
						<u-button :text="$t('order.paymentBtn')" shape="circle" :customStyle="status1" v-if="item.state==1" @click="goDetail(item)"></u-button>
						<u-button :text="$t('order.examineBtn')" shape="circle" :customStyle="status2" v-if="item.state==2 || item.state==6" @click="goDetail(item)"></u-button>
						<u-button :text="$t('order.evaluateBtn')" shape="circle" :customStyle="status3" v-if="item.state==4" @click="goDetail(item)"></u-button>
					</view>
					<scroll-view scroll-x style="overflow: hidden;">
						<view class="commodity_list">
							<view class="commodity_item" v-for="(e,eIndex) in item.goods" :key="eIndex">
								<u--image :src="e.image" width="80px" height="80px" radius="7"></u--image>
								<u--text :text="e.title" color="#676767" size="12" margin="8px 0"></u--text>
								<view class="price">
									<text class="current">￥{{e.price}}</text>
									<text class="original">{{e.mark_price}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view slot="bottom">
				<tabbar :value="2"></tabbar>
			</view>
		</z-paging>
	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				lineBg: "",
				dataList: [],
				tabList: [{
					zh: '全部',
					en: 'ھەممىسى',
					type: 0
				}, {
					zh: '待付款',
					en: 'چىقىم قىلىنىدىغان',
					type: 1
				}, {
					zh: '已付款',
					en: 'تۆلەنگەن پۇل',
					type: 2
				}, {
					zh: '待评价',
					en: 'باھالاش',
					type: 4
				}],
				current: 0,
				activeStyle: {
					color: "#141414",
					fontWeight: "bold"
				},
				itemStyle: {
					height: "55px",
					marginBottom: "10rpx",
					whiteSpace: 'nowrap',
					textOverflow: 'ellipsis',
					overflow: 'hidden'
				},
				status1: {
					background: "#FF7200",
					color: "#fff",
					width: "150rpx",
					height: "50rpx",
					margin: "20px 0 0",
					border: "none",
					fontWeight: "bold"
				},
				status2: {
					background: "#FFC100",
					color: "#000",
					width: "150rpx",
					height: "50rpx",
					margin: "20px 0 0",
					border: "none",
					fontWeight: "bold"
				},
				status3: {
					background: "#FFE200",
					color: "#000",
					width: "150rpx",
					height: "50rpx",
					margin: "20px 0 0",
					border: "none",
					fontWeight: "bold"
				},
			};
		},
		onLoad() {
		      uni.$on("upList",()=>{
				  this.$refs.paging.reload()
			  })	
		},
		computed: {
			language() {
				return this._i18n.locale
			},
			...mapGetters(['isLogin'])
		},
		methods: {
			queryList(pageNo, pageSize) {
				if(this.isLogin){
					this.$http.post('wanlshop/order/getOrderList', {
						page: pageNo,
						limit: pageSize,
						state: this.tabList[this.current].type
					}).then(res => {
						if (res.code == 1) {
							this.$refs.paging.complete(res.data.data)
						} else {
							this.$refs.paging.complete(false)
						}
					})
				}else{
					let arr = []
					this.$refs.paging.complete(arr)
				}

			},
			tabClick(event) {
				if(this.current == event.index) return
				this.current = event.index
				this.$refs.paging.reload()
			},
			goDetail(item) {
				uni.$u.route({
					url: '/pagesA/order/detail',
					params: {
						// id:item.reserve_id
						id:item.id
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f6fb;
	}
</style>
<style lang="scss" scoped>
	/deep/.u-tabs__wrapper__nav__item__text {
		font-size: 26rpx !important;
	}

	/deep/.u-tabs__wrapper__nav__item {
		padding: 0 !important;
	}

	/deep/.u-tabs__wrapper__nav__line {
		bottom: -6rpx !important;
	}

	.bgc {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		height: 260rpx;
		background-color: #fff;
		position: relative;
		background-image: url();

		.tab {
			position: absolute;
			left: 0;
			bottom: -8rpx;
			width: 100%;
		}
	}

	.content {
		padding: 30rpx;

		.item {
			background-color: #fff;
			padding: 30rpx;
			display: grid;
			grid-template-columns: 1fr 1.2fr;
			grid-column-gap: 20rpx;
			margin-bottom: 20rpx;

			.commodity_list {
				display: flex;
				align-items: center;

				.commodity_item {
					width: 160rpx;
					flex-shrink: 0;
					margin-right: 20rpx;

					.price {
						display: flex;
						align-items: center;

						.current {
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
							margin-right: 10rpx;
						}

						.original {
							color: #C8C8C8;
							font-size: 26rpx;
							text-decoration: line-through;
						}
					}
				}
			}
		}

		.item:last-child {
			margin-bottom: 0;
		}
	}
</style>
